{% extends 'base.html' %}

{% block title %}
    注册
{% endblock %}

{% block content %}
  <!-- section main content -->
  <section class="main-content">
    <div class="container-xl">
      <div class="row">
        <div class="col-lg-6 mx-auto">
          <div class="post-content pt-2">
            <div class="card shadow-sm">
              <div class="card-body p-5">
                <h3 class="text-center mb-4">创建账号</h3>
                <form id="register-form" method="post">
                    {% csrf_token %}
                  <!-- 用户名输入框 -->
                  <div class="form-group mb-4">
                    <label for="username" class="form-label">用户名</label>
                    <input type="text" name="username" class="form-control form-control-lg" id="username" placeholder="请输入用户名">
                  </div>

                  <!-- 邮箱输入框 -->
                  <div class="form-group mb-4">
                    <label for="email" class="form-label">电子邮箱</label>
                    <input type="email" name="email" class="form-control form-control-lg" id="email" placeholder="请输入您的邮箱">
                  </div>

                  <!-- 密码输入框 -->
                  <div class="form-group mb-4">
                    <label for="password" class="form-label">密码</label>
                    <input type="password" name="password" class="form-control form-control-lg" id="password" placeholder="请输入密码">
                  </div>

                  <!-- 确认密码输入框 -->
                  <div class="form-group mb-4">
                    <label for="confirm-password" class="form-label">确认密码</label>
                    <input type="password" name="re_password" class="form-control form-control-lg" id="confirm-password" placeholder="请再次输入密码">
                  </div>

                  <!-- 同意条款 -->
                  <div class="form-check mb-4">
                    <input class="form-check-input" type="checkbox" id="agree">
                    <label class="form-check-label" for="agree">
                      我已阅读并同意 <a href="#" class="text-decoration-none">服务条款</a> 和 <a href="#" class="text-decoration-none">隐私政策</a>
                    </label>
                  </div>
                    {% if error_msg %}
                        <span style="color: red">{{ error_msg }}</span>
                    {% endif %}
                  <!-- 注册按钮 -->
                  <div class="form-group text-center">
                    <input type="submit" class="btn btn-primary btn-lg w-100" value="注册">
                  </div>

                  <!-- 登录链接 -->
                  <div class="text-center mt-4">
                    <p class="mb-0">已有账号？ <a href="/user/login/" class="text-decoration-none">立即登录</a></p>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
{% endblock %}

{% block js %}
<!-- SCRIPTS -->
<script>
  // 用户菜单切换功能：点击触发元素显示或隐藏用户菜单
  function toggleUserMenu(event) {
    event.stopPropagation(); // 阻止事件冒泡以避免与全局点击监听冲突
    const menu = document.getElementById('userMenu');
    // 切换菜单的显示状态，'none'表示隐藏，'block'表示显示
    menu.style.display = menu.style.display === 'none' ? 'block' : 'none';
  }

  // 全局点击监听器：当点击不在菜单或汉堡按钮内时关闭用户菜单
  document.addEventListener('click', function(event) {
    const menu = document.getElementById('userMenu');
    const burgerButton = document.querySelector('.burger-menu');
    // 如果点击的目标既不在菜单内也不在汉堡按钮内，则隐藏菜单
    if (!menu.contains(event.target) && !burgerButton.contains(event.target)) {
      menu.style.display = 'none';
    }
  });

  // 搜索框切换功能：控制搜索框展开和收起
  function toggleSearchBox(event) {
    event.stopPropagation();
    const searchContainer = document.querySelector('.search-container');
    // 切换'search-container'的'active'类以控制样式变化
    searchContainer.classList.toggle('active');
    // 如果激活了搜索框，延迟100ms后自动聚焦输入框
    if (searchContainer.classList.contains('active')) {
      setTimeout(() => {
        const input = searchContainer.querySelector('.form-control');
        if(input) input.focus();
      }, 100);
    }
  }

  // 全局点击监听器：当点击不在搜索容器内时关闭搜索框
  document.addEventListener('click', function(event) {
    const searchContainer = document.querySelector('.search-container');
    // 如果点击的目标不在搜索容器内，则移除'active'类以关闭搜索框
    if (!searchContainer.contains(event.target)) {
      searchContainer.classList.remove('active');
    }
  });
</script>
{% endblock %}

{% block css %}
<style>
.user-menu {
  border-radius: 4px;
  margin-top: 10px;
}

.user-menu .dropdown-item,
.user-menu .dropdown-item:hover,
.user-menu .dropdown-item:active,
.user-menu .dropdown-item:focus {
  box-sizing: border-box;
  width: 100%;
  padding: 8px 16px;
  border: none;
  font-weight: 400;
  outline: none;
  margin: 0;
  display: flex;
  align-items: center;
  transition: background-color 0.2s, color 0.2s;
}
.user-menu .dropdown-item:hover {
  background-color: #f8f9fa;
  color: #fe5e74;
}
.user-menu .text-danger,
.user-menu .text-danger:hover,
.user-menu .text-danger:active,
.user-menu .text-danger:focus {
  color: #dc3545 !important;
  background: none;
  box-sizing: border-box;
  width: 100%;
  padding: 8px 16px;
  border: none;
  font-weight: 400;
  outline: none;
  margin: 0;
  display: flex;
  align-items: center;
}
.user-menu .text-danger:hover {
  background-color: #dc3545 !important;
  color: #fff !important;
}

.burger-menu {
  cursor: pointer;
}

.search-container {
  display: flex;
  align-items: center;
  position: relative;
}

.search-toggle {
  color: #fe5e74;
  background: none;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: background 0.2s;
  flex-shrink: 0;
}
.search-toggle:hover {
  background: rgba(254,94,116,0.08);
  color: #fe5e74;
}

.search-form {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.08);
  padding: 0 8px 0 0;
  margin-left: 0;
  height: 40px;
  width: 0;
  overflow: hidden;
  transition: width 0.3s cubic-bezier(.4,2,.6,1);
  position: relative;
}

.search-container:not(.active) .search-form {
  width: 0;
  padding: 0;
  border: none;
}

.search-container.active .search-toggle {
  display: none;
}

.search-container.active .search-form {
  width: 260px;
  padding: 0 8px 0 0;
}

.search-form .form-control {
  border: none;
  outline: none;
  box-shadow: none;
  border-radius: 20px;
  padding: 8px 40px 8px 16px;
  font-size: 15px;
  background: transparent;
  flex: 1;
}

.search-form .search-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #fe5e74;
  font-size: 18px;
  padding: 0;
  cursor: pointer;
}
.search-form .search-btn:hover {
  color: #fe5e74;
}

.icon-button {
  cursor: pointer;
  padding: 8px;
  border: none;
  background: none;
  color: #fe5e74;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.icon-button:hover {
  background-color: rgba(254, 94, 116, 0.08);
  color: #fe5e74;
}

.burger-icon {
  display: block;
  width: 20px;
  height: 2px;
  background-color: currentColor;
  position: relative;
  transition: all 0.3s ease;
}

.burger-icon:before,
.burger-icon:after {
  content: '';
  position: absolute;
  width: 20px;
  height: 2px;
  background-color: currentColor;
  transition: all 0.3s ease;
}

.burger-icon:before {
  top: -6px;
}

.burger-icon:after {
  bottom: -6px;
}

.icon-button:hover .burger-icon:before {
  transform: translateY(2px);
}

.icon-button:hover .burger-icon:after {
  transform: translateY(-2px);
}

.search-container .search.icon-button {
  display: flex;
}
.search-container.active .search.icon-button {
  display: none;
}
</style>
{% endblock %}
